<template>
	<view class="content">
		<health-title @timeBack="timeBack" :borderBottom="false" height="120" Title="运动" :showWeek="true" :showTab="false"></health-title>
		<view class="box box1">
			<view class="left">
				<view class="item item1">
					<u-circle-progress
						inactive-color="#d8f7dd"
						active-color="#15CA4C" 
						:percent="percent1>100?100:percent1"
						border-width="54"
						width="650"
						bg-color="none"
						duration="1000"
					 >
						
					</u-circle-progress>
					
				</view>
				<view class="item item2">
					<u-circle-progress
						inactive-color="#f9dfd5"
						active-color="#EB5D30" 
						:percent="percent2>100?100:percent2"
						border-width="54"
						width="500"
						duration="1000"
						bg-color="none"
					 >
						
					</u-circle-progress>
				</view>
				<view class="" style="clear: both;">
					
				</view>
				<!-- <view class="item item3">
					<u-circle-progress
						inactive-color="#fdf5d7"
						active-color="#FFB000" 
						:percent="percent3>100?100:percent3"
						border-width="54"
						width="200"
						duration="1000"
						bg-color="none"
					 >
						
					</u-circle-progress>
				</view> -->
				<view class="item item4">
					<u-circle-progress
						inactive-color="#d3effd"
						active-color="#47ACF7" 
						:percent="percent4>100?100:percent4"
						border-width="54"
						width="350"
						duration="1000"
						bg-color="none"
					 >
						
					</u-circle-progress>
				</view>
			</view>
			<view class="right list">
				<view class="item">
					<view class="num-box _df">
						<view class="num">
							{{box1Data.stepsUser}}
						</view>
						<view class="dw">
							/{{box1Data.steps}}
						</view>
					</view>
					<view class="info" style="color: #15CA4C;">
						步数（步）
					</view>
				</view>
				<view class="item">
					<view class="num-box _df">
						<view class="num">
							{{box1Data.heatUser}}
						</view>
						<view class="dw">
							/{{box1Data.heat / 1000}}
						</view>
					</view>
					<view class="info" style="color: #EB5D30;">
						消耗（千卡）
					</view>
				</view>
				<view class="item">
					<view class="num-box _df">
						<view class="num">
							{{box1Data.distanceUser}}
						</view>
						<view class="dw">
							/{{box1Data.distance}}
						</view>
					</view>
					<view class="info" style="color: #47ACF7;">
						距离（米）
					</view>
				</view>
				<!-- <view class="item">
					<view class="num-box _df">
						<view class="num">
							{{box1Data.durationUser}}
						</view>
						<view class="dw">
							/{{box1Data.duration}}
						</view>
					</view>
					<view class="info" style="color:#FFB000;">
						运动时长（分钟）
					</view>
				</view> -->
			</view>
		</view>
		<view class="box3 _df _jb _ac" @click="toView">
			<view class="">
				运动目标设置
			</view>
			<u-icon name="arrow-right" color="#888" size="28"></u-icon>
		</view>
		<view class="box box2">
			<view class="title-box _df _ac">
				<image src="@/static/img/index/hd1.png" mode=""></image>
				步数（步）
			</view>
			<view class="num-box _df">
				<view class="item">
					<view class="num">
						{{box1Data.stepsUser}}
					</view>
					<view class="txt">
						当前步数
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{chartData1.upAgvWeek}}
					</view>
					<view class="txt">
						上周日均步数
					</view>
				</view>
			</view>
			<view class="chart-active">
				<l-echart ref="chart1" class="chart"></l-echart>
			</view>
		</view>
		<view class="box box2">
			<view class="title-box _df _ac">
				<image src="@/static/img/index/hd2.png" mode=""></image>
				消耗（千卡）
			</view>
			<view class="num-box _df">
				<view class="item">
					<view class="num">
						{{box1Data.heatUser}}
					</view>
					<view class="txt">
						当前消耗
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{chartData2.upAgvWeek}}
					</view>
					<view class="txt">
						上周日均消耗
					</view>
				</view>
			</view>
			<view class="chart-active">
				<l-echart ref="chart2" class="chart"></l-echart>
			</view>
		</view>
		
		<view class="box box2">
			<view class="title-box _df _ac">
				<image src="@/static/img/index/hd4.png" mode=""></image>
				距离（米）
			</view>
			<view class="num-box _df">
				<view class="item">
					<view class="num">
						{{box1Data.distanceUser}}
					</view>
					<view class="txt">
						当前距离
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{chartData3.upAgvWeek}}
					</view>
					<view class="txt">
						上周日均距离
					</view>
				</view>
			</view>
			<view class="chart-active">
				<l-echart ref="chart3" class="chart"></l-echart>
			</view>
		</view>
		<!-- <view class="box box2">
			<view class="title-box _df _ac">
				<image src="@/static/img/index/hd3.png" mode=""></image>
				运动时长（分钟）
			</view>
			<view class="num-box _df">
				<view class="item">
					<view class="num">
						{{box1Data.durationUser}}
						
					</view>
					<view class="txt">
						当前时长
					</view>
				</view>
				<view class="item">
					<view class="num">
						{{chartData4.upAgvWeek}}
					</view>
					<view class="txt">
						上周日均时长
					</view>
				</view>
			</view>
			<view class="chart-active">
				<l-echart ref="chart4" class="chart"></l-echart>
			</view>
		</view> -->
	</view>
</template>

<script>
	import moment from "moment";
	export default {
		data() {
			return {
				page:{
					begin: "",
					end: "",
					now:""
				},
				xData:[],
				yData:[],
				yData2:[],
				format:'HH:mm',
				dateType:'日',
				infoData:{},
				sum:0,
				min:'',
				max:'',
				box1Data:{},
				chartData1:{},
				chartData2:{},
				chartData3:{},
				chartData4:{},
				percent1:0,
				percent2:0,
				percent3:0,
				percent4:0,
			};
		},
		watch:{
			percent1(v){
				this.percent1 = v
			}
		},
		onReady() {
			
		},
		onShow() {
			// this.getData()
		},
		onLoad() {
			
		},
		methods:{
			getStep(){
				let that = this
				uni.$_get({
					url: "get-index-data",
					that: that,
					success(res) {
						let data = res.data;
						if(res.code == 0){
							that.percent1 = Number((data.motion.stepsUser / data.motion.steps *100 / 2).toFixed(2))
							that.percent2 = Number((data.motion.heatUser / data.motion.heat *100 / 2).toFixed(2))
							that.percent3 = Number((data.motion.durationUser / data.motion.duration *100 / 2).toFixed(2))
							that.percent4 = Number((data.motion.distanceUser / data.motion.distance *100 / 2).toFixed(2))
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			getData(){
				let that = this
				uni.$_post({
					url: "getMotion",
					that: that,
					params: that.page,
					success(res) {
						// console.log(res)
						
						if(res.code == 0){
							let _data = res.data.one;
							that.box1Data = res.data.one;
							that.chartData1 = res.data.two;
							if(res.data.three){
								that.chartData2 = res.data.three
								let arr = []
								that.chartData2.dataList.map(item =>{
									let val = Number((item / 1000).toFixed(0))
									arr.push(val)
								})
								that.chartData2.dataList = arr;
								that.chartData2.upAgvWeek = Number((that.chartData2.upAgvWeek / 1000).toFixed(0))
							}
							
							that.box1Data.heatUser = (that.box1Data.heatUser / 1000).toFixed(0)
							
							that.chartData3 = res.data.four;
							that.chartData4 = res.data.five;
							if(_data.stepsUser && _data.steps){
								that.percent1 = Number((_data.stepsUser / _data.steps * 100 *0.5).toFixed(0))
							}else{
								that.percent1 = 0
							}
							if(_data.heatUser && _data.heat){
								that.percent2 = Number((_data.heatUser / _data.heat *100*0.5 ).toFixed(0))
							}else{
								that.percent2 = 0
							}
							if(_data.durationUser && _data.duration){
								that.percent3 = Number((_data.durationUser / _data.duration *100*0.5 ).toFixed(0))
							}else{
								that.percent3 = 0
							}
							if(_data.distanceUser && _data.distance){
								that.percent4 = Number((_data.distanceUser / _data.distance *100*0.5 ).toFixed(0))
							}else{
								that.percent4 = 0
							}
							// if(that.percent1==0){
							// 	that.percent1 = 0
							// }if(that.percent2==0){
							// 	that.percent2 = 0
							// }if(that.percent3==0){
							// 	that.percent3 = 0
							// }if(that.percent4==0){
							// 	that.percent4 = 0
							// }
							// that.sum = that.infoData.maxCount + that.infoData.minCount
							console.log(that.chartData2)
							that.initChart(that.chartData1,that.chartData2,that.chartData3,that.chartData4);
							
						}else{
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			timeBack(e,dateList) {
				console.log(e, 666)
				console.log(dateList, 777)
				if(e.dateTxt == '周'){
					this.format = 'MM-DD'
				}else if(e.dateTxt == '月'){
					this.format = 'MM-DD'
				}else{
					this.format = 'HH:mm'
				}
				this.dateType = e.dateTxt
				this.page.now = e.sTime
				this.page.begin = dateList[0].date
				this.page.end = dateList[dateList.length - 1].date
				this.getData()
			},
			toView(){
				if(uni.getStorageSync('isTesting')){
					uni.showToast({
						title:'正在测量压力，请稍后重试',
						icon:'none',
						duration:1500
					})
				}else{
					uni.navigateTo({
						url:'/pages/comA/activity/view'
					})
				}
				
			},
			init() {
				this.initChart()
				// chart 图表实例不能存在data里
				
			},
			initChart(chartData1,chartData2,chartData3,chartData4) {
				// chart 图表实例不能存在data里
				// const chart = await this.$refs.chart1.init(this.$echarts);
				// chart.setOption(this.option1)
				this.option1 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true,
					},
					color: ['#33cc61'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							splitLine: {
								show: false   //隐藏x轴那条线
							},
							axisTick: {
								show: false   //隐藏x轴的刻度
							},
							axisLine: {
								show: false   
							},
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								    lineHeight: 30,
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								}
							}
						}
					],
					series: [
						{
							name: '步数',
							type: 'bar',
							barGap: 0,
							itemStyle: {
								borderRadius: [10, 10, 0, 0]
							},
							barWidth: 16,
							barGap: '50%',
							// label: labelOption,
							emphasis: {
								focus: 'series'
							},
							data: chartData1.dataList,
							markLine:{
								label:{
									position:'insideEndTop',
								},
								precision:0,
								lineStyle:{
									type: 'dashed' ,
								},
								data:[
										{
											type:"average",
											name:"平均值"
										}
									 ]
								}
						}
					]
				},
				this.option2={
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true,
					},
					color: ['#ff6300'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							splitLine: {
								show: false   //隐藏x轴那条线
							},
							axisTick: {
								show: false   //隐藏x轴的刻度
							},
							axisLine: {
								show: false   
							},
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								    lineHeight: 30,
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								}
							}
						}
					],
					series: [
						{
							name: '消耗',
							type: 'bar',
							barGap: 0,
							itemStyle: {
								borderRadius: [10, 10, 0, 0]
							},
							barWidth: 16,
							barGap: '50%',
							// label: labelOption,
							emphasis: {
								focus: 'series'
							},
							data: chartData2.dataList,
							markLine:{
								label:{
									position:'insideEndTop',
								},
								precision:0,
								data:[
										{
											type:"average",
											name:"平均值"
										}
									 ]
								}
						}
					]
				},
				this.option3 = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true,
					},
					color: ['#4cbaff'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							splitLine: {
								show: false   //隐藏x轴那条线
							},
							axisTick: {
								show: false   //隐藏x轴的刻度
							},
							axisLine: {
								show: false   
							},
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								    lineHeight: 30,
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								}
							}
						}
					],
					series: [
						{
							name: '运动时长',
							type: 'bar',
							barGap: 0,
							itemStyle: {
								borderRadius: [10, 10, 0, 0]
							},
							barWidth: 16,
							barGap: '50%',
							// label: labelOption,
							emphasis: {
								focus: 'series'
							},
							data: chartData3.dataList,
							markLine:{
								label:{
									position:'insideEndTop',
								},
								precision:0,
								data:[
										{
											type:"average",
											name:"平均值"
										}
									 ]
								}
						}
					]
				},
				this.option4={
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						},
						confine: true,
					},
					color: ['#ffb700'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							splitLine: {
								show: false   //隐藏x轴那条线
							},
							axisTick: {
								show: false   //隐藏x轴的刻度
							},
							axisLine: {
								show: false   
							},
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								    lineHeight: 30,
								}
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								boundaryGap: false,
								textStyle: {
								    color: "#999",
								    fontSize: '10',
								}
							}
						}
					],
					series: [
						{
							name: '活动次数',
							type: 'bar',
							barGap: 0,
							itemStyle: {
								borderRadius: [10, 10, 0, 0]
							},
							barWidth: 16,
							barGap: '50%',
							// label: labelOption,
							emphasis: {
								focus: 'series'
							},
							data: chartData4.dataList,
							markLine:{
								label:{
									position:'insideEndTop',
								},
								precision:0,
								data:[
										{
											type:"average",
											name:"平均值"
										}
									 ]
								}
						}
					]
				}
				this.$refs.chart1.init(this.$echarts, chart=> {
					chart.setOption(this.option1);
				});
				this.$refs.chart1.setOption(this.option1)
				this.$refs.chart2.init(this.$echarts, chart=> {
					chart.setOption(this.option2);
				});
				this.$refs.chart2.setOption(this.option2)
				this.$refs.chart3.init(this.$echarts, chart=> {
					chart.setOption(this.option3);
				});
				this.$refs.chart3.setOption(this.option3)
				// this.$refs.chart4.init(this.$echarts, chart=> {
				// 	chart.setOption(this.option4);
				// });
				// this.$refs.chart4.setOption(this.option4)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0 30rpx 60rpx;
	}
	.box{
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10);
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
	}
	.box1{
		
		.left{
			margin: 0 0 60rpx 0;
			position: relative;
			width: 100%;
			height: 620rpx;
			.item{
				width: 100%;
				height: 100%;
				text-align: center;
				// transform: rotate(180deg);
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: center center;
				transform: rotate(-90deg);
				display: flex;
				justify-content: center;
				align-items: center;
				&::before{
					display: block;
					content: '';
					width: 50%;
					height: 100%;
					background-color: #fff;
					position: absolute;
					top: 0;
					left: -10rpx;
					z-index: 2;
					
				}
			}
			.item1{
				width: 100%;
				
			}
			.item2{
				// width: 75%;
				margin: 0 auto;
			}.item3{
				// width: 50%;
			}.item4{
				// width: 25%;
			}
		}
		.list{
			margin-top: -300rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 50%;
				padding-left: 50rpx;
				padding-top: 10rpx;
				box-sizing: border-box;
				margin-bottom: 50rpx;
				position: relative;
				&::before{
					display: block;
					content: '';
					width: 1rpx;
					height: 70rpx;
					background-color: #e2e2e2;
					position: absolute;
					top: 50%;
					right: 0;
					margin-top: -35rpx;
				}
				.num-box{
					height: 58rpx;
					line-height: 58rpx;
					font-family: $uni-font-family-Bold;
					font-size: 50rpx;
					color: #171717;
					
					.dw{
						font-size: 24rpx;
						line-height: 70rpx;
						color: #999999;
						margin-left: 8rpx;
					}
				}
				.info{
					height: 48rpx;
					line-height: 48rpx;
					font-family: $uni-font-family-Bold;
					font-size: 24rpx;
					color: #222;
				}
			}
			.item:nth-child(2),
			.item:nth-child(4){
				&::before{
					display: none;
				}
			}
		}
	}
	.box2{
		.title-box{
			padding-bottom: 40rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 28rpx;
			color: #171717;
			font-family: $uni-font-family-Bold;
			margin-bottom: 40rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
		.num-box{
			.item{
				flex: 1;
				text-align: center;
				.num{
					font-size: 46rpx;
					color: #171717;
					font-family: $uni-font-family-Bold;
					margin-bottom: 18rpx;
				}
				.txt{
					font-size: 24rpx;
					color: #171717;
					font-family: $uni-font-family-Medium;
				}
			}
		}
	}
	.chart-box{
		height: 500rpx;
		width: 100%;
		margin-top: -50rpx;
	}
	.box3{
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
		height: 130rpx;
		padding: 0 30rpx;
		color: #222;
		font-family: $uni-font-family-Bold;
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}
	
</style>
